<template>
  <div>
    <!-- <a-layout>
      <a-layout-header>
        <a-row style="text-align: center">
          <a-col :span="6" style="margin-top: 30px">
            <a-image
              v-if="infoData.u_avatar"
              :width="100"
              :height="100"
              :src="'/api/avatar/' + infoData.u_avatar"
            ></a-image>
            <a-image
              v-else
              :width="100"
              :height="100"
              src
              fallback=""
            />
          </a-col>
          <a-col :span="10">{{ infoData.u_name }}({{ infoData.u_id }})</a-col>
          <a-col :span="8">
            <a-tag v-for="tag in tagList" :key="tag.ut_id">{{tag.ut_name}}</a-tag>
          </a-col>
        </a-row>
        <a-row style="text-align: center">
          <a-col :span="6"
            ><a-button
              v-if="CurrU_id == infoData.u_id"
              @click="toggleShow"
              style="margin-top: 30px"
              >点击此处上传头像</a-button
            ></a-col
          >
          <a-col :span="6">
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/myarticle')"
                >我的文章</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/myarticle',infoData.u_id)"
                >他的文章</a-button
              >
            </div>
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/subscription')"
                >我的收藏</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/subscription',infoData.u_id)"
                >他的收藏</a-button
              >
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/following')"
                >我的关注</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/following',infoData.u_id)"
                >他的关注</a-button
              >
            </div>
            <div>
              <a-button
                type="link"
                @click="pushPath('/user/information',infoData.u_id)"
                >个人信息</a-button
              >
            </div>
          </a-col>
          <a-col :span="6">
            <div>
              <a-button
                type="link"
                v-if="CurrU_id == infoData.u_id"
                @click="pushPath('/user/followed')"
                >我的粉丝</a-button
              >
              <a-button type="link" v-else @click="pushPath('/user/followed',infoData.u_id)"
                >他的粉丝</a-button
              >
            </div>
            <div></div>
          </a-col>
        </a-row>
      </a-layout-header>
      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
    </a-layout> -->

    <a-row>
      <a-col :span="18">
        <div class="info-content">
          <router-view></router-view>
        </div>
      </a-col>
      <a-col :span="6">
        <div style="margin-top: 50px">
          <a-affix :offset-top="50">
            <div class="info-box">
              <div class="info-box-content">
                <a v-if="CurrU_id == infoData.u_id" @click="toggleShow">
                  <a-avatar
                    :size="80"
                    :src="'/api/avatar/' + infoData.u_avatar"
                  ></a-avatar>
                </a>
                <a-avatar
                  v-else
                  :size="80"
                  :src="'/api/avatar/' + infoData.u_avatar"
                ></a-avatar>
                <div style="margin-top: 10px">
                  <span>
                    {{ infoData.u_name }}
                  </span>
                  
                </div>
                <a-tag v-for="tag in tagList" :key="tag.ut_id">{{tag.ut_name}}</a-tag>
                <a-divider></a-divider>
                <a-row>
                  <a-col style="cursor: pointer" :span="12">
                    <div @click="pushPath('/user/following', infoData.u_id)">
                      关注
                    </div>
                    <div>{{ infoData.fol_count }}</div>
                  </a-col>
                  <a-col style="cursor: pointer" :span="12">
                    <div @click="pushPath('/user/followed', infoData.u_id)">
                      粉丝
                    </div>
                    <div>{{ infoData.fans_count }}</div>
                  </a-col>
                </a-row>
              </div>
            </div>
            <div class="info-box" style="margin-top: 20px">
              <a-menu mode="inline">
                <a-menu-item
                  key="1"
                  @click="pushPath('/user/myarticle', infoData.u_id)"
                  >作品</a-menu-item
                >
                <a-menu-item
                  key="2"
                  @click="pushPath('/user/subscription', infoData.u_id)"
                  >收藏夹</a-menu-item
                >
                <a-menu-item
                  key="3"
                  @click="pushPath('/user/information', infoData.u_id)"
                  >个人信息</a-menu-item
                >
                <a-menu-item
                  v-if="CurrU_id == infoData.u_id"
                  key="4"
                  @click="pushPath('/user/message/comment','')"
                  >消息通知</a-menu-item
                >
              </a-menu>
            </div>
          </a-affix>
        </div>
      </a-col>
    </a-row>

    <my-upload
      @crop-success="cropSuccess"
      @crop-upload-fail="upload"
      @crop-upload-success="cropUploadSuccess"
      v-model="aa.show"
      img-format="png"
      :size="aa.size"
      langType="zh"
      :noRotate="false"
      :headers="{ Token: getLocalToken() }"
      url="/api/user/information/avatar"
    ></my-upload>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { get, post, getBlob, tip, getLocalToken } from "@/common";
import "babel-polyfill";
import myUpload from "vue-image-crop-upload";

const aa = reactive({
  avatar: "", //用于存储剪切完图片的base64Data和显示回调图片
  show: false, //剪切框显示和隐藏的flag
  size: 2.1,
});

export default defineComponent({
  components: {
    "my-upload": myUpload,
  },
  setup() {
    const infoData = ref({});
    const tagList = ref([]);

    const CurrU_id = ref();
    const getCurrU_id = () => {
      get("/user/home/curr-user2").then((res) => {
        CurrU_id.value = res.data.u_id;
        getInfo();
        console.log(CurrU_id.value);
      });
    };

    const getInfo = () => {
      let u_id = window.location.search.split("=")[1];
      if (u_id) {
        get("/user/information/userinfo?u_id=" + u_id).then((res) => {
          infoData.value = res.data;
          getusertab(u_id);
        });
      } else {
        get("/user/information/userinfo?u_id=" + CurrU_id.value).then((res) => {
          infoData.value = res.data;
          getusertab(CurrU_id.value);
        });
      }
    };

    const getusertab = (uid) => {
      get("user/information/usertab?u_id=" + uid).then((res) => {
        tagList.value = res.data;
      });
    };

    const router = useRouter();
    const pushPath = (p, v) => {
      if(v==''){
        router.push({ path: p});
      }else{
        router.push({ path: p, query: { u_id: v } });
      }
    };
    const toggleShow = () => {
      aa.show = !aa.show;
    };
    const cropSuccess = (imgDataUrl) => {
      aa.avatar = imgDataUrl;
    };
    const upload = (imgDataUrl) => {
      toggleShow();
    };
    const cropUploadSuccess = () => {
      getInfo();
    };
    getCurrU_id();
    return {
      infoData,
      CurrU_id,
      getInfo,
      getLocalToken,
      router,
      pushPath,
      aa,
      toggleShow,
      cropSuccess,
      upload,
      cropUploadSuccess,
      getusertab,
      tagList,
    };
  },
});
</script>
<style>
/* .ant-layout {
  background: #00000000;
}
.ant-layout-header {
  background: #ffffff;
  height: auto;
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
}
.ant-layout-content {
  margin-top: 50px;
  margin-bottom: 50px;
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
  background: #ffffff;
} */
.info-box {
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
  background: #ffffff;
  margin-left: 15px;
}
.info-box-content {
  padding: 10% 10% 10% 10%;
  text-align: center;
}
.info-content {
  margin-top: 50px;
  margin-bottom: 50px;
  box-shadow: rgb(182, 182, 182) 2px 2px 2px 2px;
  background: #ffffff;
}
</style>